<template>
  <div :class="className" :style="{ height: height, width: width }" ref="chartRef" />
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // Echarts theme
import useResize from '@/components/Echarts/Composable/resize' // 假设我们将 mixin 转换为组合式函数

const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  direction: {
    type: String,
    default: 'vertical'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  legend: {
    type: Boolean,
    default: false
  },
  legendNames: {
    type: Array,
    default: () => []
  },
  legendColor: {
    type: String,
    default: '#ffffff'
  },
  colors: {
    type: Array,
    default: () => ['#3aa0ff', '#36cbcb', '#4ecb73', '#fad337', '#f2637b']
  },
  xAxisNames: {
    type: Array,
    default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  axisLineColor: {
    type: String,
    default: '#333'
  },
  axisColor: {
    type: String,
    default: '#333'
  },
  splitLine: {
    type: Boolean,
    default: false
  },
  lazy: {
    type: Boolean,
    default: false
  },
  barWidth: {
    type: Number,
    default: null
  }
})

const chartRef = ref(null)
const chart = shallowRef(null)
const loaded = ref(false)

// 使用 resize 组合式函数
useResize(chart)

const generateSeries = (chartData) => {
  const series = []
  for (let i = 0 ; i < chartData.length ; i++) {
    const serie = {
      name: props.legendNames[i],
      type: 'bar',
      data: chartData[i],
      smooth: true,
      animationDuration: 2800,
      animationEasing: 'cubicInOut',
      colorBy: props.colors && props.colors.length === chartData.length ? 'series' : 'data'
    }
    if (props.barWidth) {
      serie.barWidth = props.barWidth
    }
    if (props.colors && props.colors.length === chartData.length) {
      serie.itemStyle = {
        color: props.colors[i],
        lineStyle: {
          color: props.colors[i],
          width: 2
        }
      }
    }
    series.push(serie)
  }
  return series
}

const setOptions = (chartData) => {
  chart.value.setOption({
    legend: {
      data: props.legendNames,
      show: props.legend,
      textStyle: {
        color: props.legendColor
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 30,
      left: '2%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: props.direction !== 'horizontal' ? 'category' : 'value',
        data: props.direction !== 'horizontal' ? chartData.xAxisNames : '',
        axisTick: {
          alignWithLabel: true
        },
        splitLine: {show: props.splitLine},
        axisLine: {
          show: props.axisLineColor !== '',
          lineStyle: {
            color: props.axisLineColor
          }
        },
        axisLabel: {
          color: props.axisColor
        }
      }
    ],
    yAxis: [
      {
        type: props.direction !== 'horizontal' ? 'value' : 'category',
        data: props.direction !== 'horizontal' ? '' : chartData.xAxisNames,
        axisTick: {
          show: false
        },
        splitLine: {show: props.splitLine},
        axisLine: {
          show: props.axisLineColor !== '',
          lineStyle: {
            color: props.axisLineColor
          }
        },
        axisLabel: {
          color: props.axisColor
        }
      }
    ],
    series: generateSeries(chartData.chartData)
  })
}

const loadChart = (chartData) => {
  if (!props.lazy) {
    chart.value = echarts.init(chartRef.value)
  } else {
    if (!loaded.value) {
      chart.value = echarts.init(chartRef.value)
      loaded.value = true
    }
  }
  setOptions(chartData)
}

// 监听数据变化
// watch(() => props.chartData, (newVal) => {
//   if (!props.lazy) {
//     setOptions({
//       xAxisNames: props.xAxisNames,
//       chartData: props.chartData
//     })
//   }
// }, {deep: true})

// 生命周期钩子
// onMounted(() => {
//   nextTick(() => {
//     if (!props.lazy) {
//       loadChart({
//         xAxisNames: props.xAxisNames,
//         chartData: props.chartData
//       })
//     }
//   })
// })

onBeforeUnmount(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

defineExpose({
  loadChart
})
</script>
